<template>
	<view>
		<!-- 笑话的内容-->
		<view class="jokeContent">
			<view class="jokeText">
				<text>#{{currentItem.cat}}#</text>
				{{currentItem.text}}}
			</view>
			<!-- 赞，踩，转发-->
			<view class="zanCai">
				<view>
					<text class="icon-zan iconfont"></text>
					{{currentItem.up}}
				</view>
				<view>
					<text class="icon-cai iconfont"></text>
					{{currentItem.down}}
				</view>
				<view>
					<text class="icon-forward iconfont"></text>
					{{currentItem.forward}}
				</view>
			</view>
		</view>
		<!--热门评论 -->
		<view class="hotComments">
			<view class="title">热门评论</view>
			<!-- 评论的每一项 -->
			<view class="commentItem" v-for="(item,index) in hot" :key="index">
				<view class="left">
					<image :src="item.user.profile_image"></image>
				</view>
				<view class="right">
					<view class="commentTopUser">
						<view class="commentNickName">{{item.user.username}}</view>
						<view class="commentZaiCai">
							<view>
								<text class="icon-zan iconfont"></text>
								{{item.like_count}}
							</view>
							<view style="margin-left: 28upx;">
								<text class="icon-cai iconfont"></text>
								{{item.hate_count}}
							</view>
						</view>
					</view>
					<!--回复内容 -->
					<view class="commentText">
						{{item.content}}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 最新评论 -->
		<view class="hotComments">
			<view class="title">最新评论</view>
			<!-- 评论的每一项 -->
			<view class="commentItem" v-for="(item,index) in normal" :key="index">
				<view class="left">
					<image :src="item.user.profile_image"></image>
				</view>
				<view class="right">
					<view class="commentTopUser">
						<view class="commentNickName">{{item.user.username}}</view>
						<view class="commentZaiCai">
							<view>
								<text class="icon-zan iconfont"></text>
								{{item.like_count}}
							</view>
							<view style="margin-left: 28upx;">
								<text class="icon-cai iconfont"></text>
								{{item.hate_count}}
							</view>
						</view>
					</view>
					<!--回复内容 -->
					<view class="commentText">
						{{item.content}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<!--
* 思考一个问题，怎么样在详细页面里获取这个贴子的回复信息
* 怎么去抓包  
* 浏览器---》检测----》network---》xhr
* 看请求信息里面的xhr这条
* https://www.softeem.xin/c.api/topic/comment_list/29388510/0/budejie-android-8.0.1/0-20.json
* 只有抓完了包以后，我们才能够知道这个地方到底怎么去请求数据
*  -->


<script>
	export default {
		//页面上面所有的值都在data里面
		data() {
			return {
				currentItem:null,
				hot:[],		//热门评论
				normal:[]   //最新评论
				
			}
		},
		onLoad() {
			//在这里，我要把缓存的值，【拿】出来
			let currentItem = uni.getStorageSync("currentItem");
			//拿到这个值以后，只需要把这个值 放一页面上去就行了
			this.currentItem = currentItem;
			//我们现在要拿到贴子的id
			//let相当于var 用来定义变量
			let id = currentItem.id;
			//准备我们的url 
			let url = "https://www.softeem.xin/c.api/topic/comment_list/"+id+"/0/budejie-android-8.0.1/0-20.json";
			//上面的url地址就是根据贴子的id来获取这个贴子的回复信息,调用方法，请求上面的地址就可以了
			uni.showLoading({
				title:"正在加载评论"
			});
			uni.request({
				url:url,
				success:res=>{
					//贴子的结果就会在这个地方
					console.log(res.data);
					this.hot = res.data.hot.list;			//拿到热门评论
					this.normal = res.data.normal.list;		//拿到最新的评论
					uni.hideLoading();
				}
			})
		},
		methods: {

		}
	}
</script>

<style>
	.jokeContent{
		padding: 20upx;
		box-sizing: border-box;     /*保持盒子的大小不变*/
		border-bottom: 1px solid #ececec;
	}
	/*这个地方的样式是我们通过之前的index里面的东西拿过来的*/
	.jokeText {
		font-size: 28upx;
		font-weight: bold;
		line-height: 52upx;
	}
	.jokeText text {
		color: #ffa500;
		margin-right: 10upx;
	}
	/*赞踩*/
	.zanCai{
		display: flex;
		height: 64upx;
		font-size: 20upx;
		align-items: center;
	}
	.zanCai view{
		margin-right: 40upx;
	}
	.hotComments{
		padding-left: 8upx;
		box-sizing: border-box;
		padding-top: 12px;
	}
	.hotComments .title{
		font-size: 32upx;
		font-weight: bold;
	}
	.commentItem{
		display: flex;
		margin-top: 16upx;
	}
	.commentItem .left{
		width: 60upx;
	}
	/*设置左边的图片*/
	.commentItem .left image{
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
	}
	.commentItem .right{
		/*占用剩下的空间*/
		flex: 1;
		box-sizing: border-box;
		padding: 0 24upx;
	}
	.commentTopUser{
		font-size: 28upx;
		display: flex;
		justify-content: space-between;
		height: 60upx;
		align-items: center;     /*副轴居中*/
	}
	.commentNickName{
		
	}
	.commentZaiCai{
		display: flex;
	}
	.commentText{
		font-size: 26upx;
		font-weight: bold;
		line-height: 48upx;
		border-bottom: 1px solid #f2f2f2;
	}
</style>
